<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<div class="flex-end-center-wrap">
						<el-checkbox v-model="quickSearch">快捷筛选</el-checkbox>
						<el-radio-group v-if="quickSearch" v-model="searchParams.period" size="small" @change="onSearchBtn">
							<el-radio-button label="1">本天</el-radio-button>
							<el-radio-button label="2">本周</el-radio-button>
							<el-radio-button label="3">本月</el-radio-button>
							<el-radio-button label="4">本年</el-radio-button>
						</el-radio-group>
						<jk-date-picker v-else v-model="searchParams.belongDate" :clearable="false" type="daterange" style="width: 280px;" placeholder="日期" size="small" class="search-bar-item-size2 margin-5-0 item-gap"></jk-date-picker>
					</div>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<jk-table
				ref="frontGroupSalaryMonthReportTable"
				:loading="tableLoading"
				border
				:stripe="false"
				:data="tableData"
				:span-method="spanMethod"
				:height="tableHeight + 30"
			>
				<vxe-column
					v-for="(item, index) in tableColumnList"
					:key="index"
					:title="item.title"
					:field="item.key"
				>
					<template #default="{ row }">
						<span v-if="index === 0" class="table-column-processName" @click="handleClick(row, index)">
							{{ row[item.key] }}
						</span>
						<span v-else>
							{{ row[item.key] }}
						</span>
					</template>

				</vxe-column>
			</jk-table>
		</jk-card>

		<save-dialog
			:page-type="pageType"
			:dialog-params="dialogParams"
			:dialog-state="saveDialogState"
			@on-visible-change="onVisibleChange"
		></save-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { formatDate } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '@/mixins/getMenuColumn';
    import handlerCache from '@/mixins/handler-cache';
    import { iotMachine } from '@/api/energy/processEnergy';
    import saveDialog from './save-dialog';
    export default {
        name: 'ProcessEnergy',
        components: { saveDialog },
        mixins: [calHeight, getMenuColumn, handlerCache],
        data() {
            return {
                apiItem: {
                    'page': iotMachine
                },
                pageType: '',
                processId: '',
                processName: '',
                dialogParams: {},
                quickSearch: true,
                tableColumnList: [],
                tableData: [],
                tableLoading: true,
                saveDialogState: false,
                searchParams: {
                    belongDate: [],
                    period: 4,
                    radioTime: []
                }
            };
        },
        watch: {
            quickSearch: {
                handler: function(newVal, oldVal) {
                    if (this.quickSearch) {
                        this.searchParams.period = this.searchParams.period ? this.searchParams.period : 4;
                        this.getDependentData();
                    } else {
                        // 默认是本天的时间
                        if (this.searchParams.belongDate.length === 0) {
                            this.searchParams.belongDate = [formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1)), formatDate(Date.now())];
                        }
                    }
                },
                deep: true
            }
        },

        mounted() {
            this.getDependentData();
        },
        methods: {
            handleClick(row, index) {
                this.pageType = 'detail';
                this.dialogParams = {
                    processId: row.processId,
                    processName: row.processName
                };
                this.dialogParams.belongDate = this.searchParams.belongDate;
                this.saveDialogState = true;
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
                // if (!e) {
                //     this.dialogParams = {
                //         processId: null,
                //         processName: null,
                //         belongDate: this.searchParams.belongDate
                //     };
                // }
            },

            async getDependentData() {
                await this.getListRequest();
            },
            // 最后两个的单元格合并
            spanMethod({ row, column, rowIndex, columnIndex }) {
                if (column.property === 'sumAmount' || column.property === 'sumEnergy') {
                    // 你需要合并的列的键名
                    if (rowIndex > 0 && this.tableData[rowIndex][column.property] === this.tableData[rowIndex - 1][column.property]) {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                    let rowspan = 1;
                    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                        if (this.tableData[i][column.property] === row[column.property]) {
                            rowspan++;
                        } else {
                            break;
                        }
                    }
                    return {
                        rowspan,
                        colspan: 1
                    };
                }
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                const params = { ...this.searchParams };
                // 根据本日/本周等做时间计算
                const now = new Date();
                params.period = Number(params.period);
                if (this.quickSearch) {
                    if (params.period === 1) {
                        // 本天
                        params.radioTime = [formatDate(now), formatDate(now)];
                    } else if (params.period === 2) {
                        // 本周
                        const startOfWeek = new Date(now);
                        startOfWeek.setDate(now.getDate() - now.getDay() + 1);
                        params.radioTime = [formatDate(startOfWeek), formatDate(new Date())];
                    } else if (params.period === 3) {
                        // 本月
                        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
                        params.radioTime = [formatDate(startOfMonth), formatDate(new Date())];
                    } else if (params.period === 4) {
                        // 本年
                        const startOfYear = new Date(now.getFullYear(), 0, 1);
                        params.radioTime = [formatDate(startOfYear), formatDate(new Date())];
                    }
                    params.belongDate[1] = params.radioTime[1];
                    params.belongDate[0] = params.radioTime[0];

                    delete params.period;
                    delete params.radioTime;
                }

                this.tableData = [];
                return this.apiItem['page'](params).then(async res => {
                    this.tableLoading = false;
                    const message = this.tableData;
                    if (res.data.status === 200) {
                        this.tableColumnList = res.data.res.tableHeader ? res.data.res.tableHeader.map(x => {
                            return {
                                title: x.value,
                                key: x.key
                            };
                        }) : [];
                        this.tableData = res.data.res.tableData;
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            }
        }
    };
</script>
<style scoped>
.table-column-processName {
    text-align: right;
    color: #409EFF;
    cursor: pointer;
}
.el-checkbox{
    margin-right: 5px;
}
.el-radio-group{
    margin: 5px;
}
</style>
